<template lang="jade">
div.record-page(v-infinite-scroll="down()", infinite-scroll-disabled="busy", infinite-scroll-distance="100")
	div.boarded.redgd
		div.return-bar
			i.iconfont(@click="back()") &#xe668;
			充值记录
		div.label 成功充值(元)
		div.balance  {{obj.success_money}}
		flexbox
			flexbox-item
				div 总充值笔数(笔)
				b {{obj.success_number}}
			flexbox-item
				div 上次充值金额(元)
				b {{obj.first}}
	div.shoping-page
		div.filter
			flexbox
				flexbox-item(:span='4', style="position:relative;")
					input(type="text",v-model="star_time", placeholder="选择开始日期")
					input(type="date",v-model="date")
				flexbox-item(:span='1',style="text-align:center;color:#999") ―
				flexbox-item(:span='4', style="position:relative;")
					input(type="text",v-model="end_time", placeholder="请选择结束日期")
					input(type="date",v-model="date1")
				flexbox-item(style="text-align:right;")
					input.m_btn(type="button", value="筛选", @click="search()")

	div(v-for=" (index, item) in items ")
		dl.money_record(v-for=" (index, a) in item ")
			dt {{index}}
			dd( v-for=" (index, b) in a ")
				span.date(style="width:25%") {{b.day}}
					div {{b.month}}
				span.content(style="width:72%")
					b(v-bind:class="{ 'blue': b.status == '0', 'green': b.status == '1' , 'grey': b.status == '2' }") 充值{{ getStatu(b.status) }}:{{b.money}}
					strong 订单:{{b.order}}
					em 充值银行:{{b.bank}}

	div.nodata(v-if="busy") {{returnstr}}


</template>

<script>
import '../../assets/sass/user/record.scss'
import '../../assets/sass/shopping.scss'
import {Calendar, Group, Loading, Flexbox, FlexboxItem} from 'vux'
import {c_recharge_record} from '../../config/api'
var date = Date, date1 = Date;
export default {

	data () {
		return {
			busy:true,
			page:1,
			star_time:'',
			end_time:'',
			items:[],
			obj:null,
			first:'',
			returnstr:'正在读取数据...'
		}
	},
	components: {
		Flexbox,
		FlexboxItem,
		Loading,
		Group,
		Calendar
	},
	watch: {

		date: function (val) {
			this.star_time = this.date
		},
		date1: function (val) {
			this.end_time = this.date1
		}
	},
	methods: {
		getStatu(key){
			var val="";
			switch(key){
				case "0":
					val = "冻结中"
					break;
				case "1":
					val = "成功"
					break;
				case "2":
					val = "失败"
					break;
			}
			return val;
		},
		search(){
			if(this.star_time=="" || this.end_time==""){
				alert("请选择日期");
				return false;
			}
			this.page = 1;
			this.items = [];
			this.busy = true;
			this.fetch(1)
		},

	    back(){
	      window.history.back();
		},

		down: function() {
			if(this.busy == true || this.items == ''){
				return false;
			}
			this.fetch(++this.page)
		},

		fetch(page) {
			this.$store.dispatch('setShowLoading', true), this.busy = true;
			//var data = {"star_time":this.star_time,"end_time":this.end_time, "number:":"20", "page":page}
      var url_api = c_recharge_record + '&star_time='+this.star_time + '&end_time='+this.end_time + '&number=20&page='  + this.page;
      this.$http({url: url_api, method: 'GET'}).then(function (response) {

				this.$store.dispatch('setShowLoading', false);
				if(response.data.status){
					this.obj = response.data;
					this.items = this.items.concat(this.obj.list);
					this.busy = false;
				}
				else{
					this.returnstr = this.global.nodateStr
					return;
				}
			});
		}
	},

	route: {
		activate ( transition ) {
			transition.next();
			this.fetch(1);
		}
	}

}
</script>
